import React, { useState, useEffect } from 'react';
import './Di.css';
import { EditSOutline, DeleteOutline, AddressBookFill } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import axios from 'axios';
import {di} from '../../https/index'
function Di() {
    const nav = useNavigate()
    const [list, setList] = useState([])
    const getData = async () => {
        const res = await di()
        setList(res.data.list)
    }
    useEffect(() => {
        getData()
    }, [])

    const add = () => {
        nav("/tdi")
    }
    return (
        <div className="address-container">
            {/* 头部 */}
            <header className="address-header">
                <div className="header-content">
                    <span className="back-icon">&lt;</span>
                    <h1 className="page-title">地址管理</h1>
                    <span className="add-icon" onClick={add}>+</span>
                </div>
            </header>

            {/* 地址列表 */}
            <div className="address-list">
                {list.map((item) => (
                    <div key={item._id} className="address-item">
                        {/* 左侧信息区 */}
                        <div className="address-info">
                            <div className="name-phone">
                                <span className="name">{item.recipient}</span>
                                <span className="phone">{item.phone}</span>
                            </div>
                            <div className="address-detail">
                                <span className="icon-map"><AddressBookFill /></span>
                                {item.provinceName + item.cityName + item.districtName}
                            </div>

                            <div className="default-tag">
                                <span className="icon-check"><input type="radio" name="" id="" /></span>
                                默认地址
                            </div>

                        </div>

                        {/* 右侧操作区 */}
                        <div className="address-actions">
                            <button className="edit-btn">
                                <span className="icon-edit" ><EditSOutline /></span> 编辑
                            </button>
                            <button className="delete-btn">
                                <span className="icon-delete"><DeleteOutline /></span> 删除
                            </button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default Di;